<template>
  <div class="goods">
    <div class="short" @click="toggleDrawer">
      <div class="image">
	<img :src="base64"/>
      </div>

      <div class="properties">
	<div class="name"> {{name}} </div>
	<div class="price"> {{price}} </div>
	<div class="typename"> {{typename}}</div>
	<div v-show="goods.tokendown">已下架</div>
      </div>
    </div>

    <Drawer :title="name" v-model="show" direction="bottom-top">
      <template #default>
	<div class="detail">
	  <div class="image">
	    <img :src="base64"/>
	  </div>

	  <div class="properties">
	    <div class="name">  {{name}}     </div>
	    <div class="price"> {{price}}    </div>
	    <div class="type">  {{typename}} </div>
	    <div class="desc">  {{desc}}     </div>
	  </div>
	</div>
      </template>

      <template #footer>
	<button class="cart" @click="toggleDialog">加入购物车</button>
	<Dialog v-model="showDialog" title="加入购物车">
	  <template #default>
	    <div class="number">
	      <span>
		<span class="notice">购买数量</span>
		<span class="stock">库存 {{stock}}</span>
	      </span>

	      <input type="number" v-model="goodsCount" min="1"/>
	    </div>
	  </template>

	  <template #footer>
	    <button class="cancel" @click="cancelDialog">取消</button>
	    <button class="submit" @click="addToCart">确认</button>
	  </template>
	</Dialog>
      </template>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
 import Drawer from '@/components/Drawer.vue'
 import Dialog from '@/components/Dialog.vue'
 import { currentUser, insertOneCart } from '@/service';
 import { ref } from 'vue';
 
 const props = defineProps({
   id:        {type: Number, required: true},
   name:      {type: String, required: true},
   price:     {type: Number, required: true},
   stock:     {type: Number, required: true},
   typename:  {type: String, required: true},
   desc:      {type: String, required: true},
   tokendown: {type: Boolean, required: true},
   base64:    {type: String, required: true}
 })

 const show = ref(false)
 const showDialog = ref(false)
 const goods = {...props}
 const goodsCount = ref(1)
 function toggleDrawer() {
   show.value = true
 }

 function toggleDialog() {
   showDialog.value = true
 }

 function cancelDialog() {
   showDialog.value = false
 }
 async function addToCart() {
   showDialog.value = false
   let item: CartItem = {
     userid: await currentUser(),
     goodsid: goods.id,
     goodsCount: goodsCount.value,
     price: props.price * goodsCount.value
   }

   console.log(item)
   insertOneCart(item)
 }
</script>

<style lang="scss" scoped>
 div.short {
   border: 1px solid black;
   display: flex;
   justify-content: space-around;
   align-items: center;
   img {
     width: 100px;
     height: 100px;
     object-fit: cover;
   }
   
   div.image {
     padding: 10px;
   }

   div.properties {
     text-align: left;

     div.name {
       font-weight: 500;
     }

     div.price {
       color: red;
     }
     
   }
 }

 div.detail {
   display: grid;
   grid-template-areas:
     'a a b'
     'a a b'
     'a a b';

   div.image {
     grid-area: a;

     img {
       width: 300px;
       width: 300px;
       object-fit: cover;
     }
   }

   div.properties {
     grid-area: b;

     display: flex;
     flex-direction: column;
     justify-content: space-around;
   }
 }

</style>

<style lang="scss" scoped>
 div.number {
   display: flex;
   justify-content: space-around;
   span.notice {
     font-size: 22px;
     font-weight: 500;
   }

   span.stock {
     font-size: 12px;
     color: grey;
   }

   input[type=number] {
     width: 30%;
   }
 }
</style>